<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		.b1 {
			width: 100px;
			height: 100px;
			background-color: red;
		}

		.b2 {
			height: 300px;
			background-color: yellow;
		}
	</style>

	<script type="text/javascript">

		window.onload = function () {
			//获取box
			var box = document.getElementById("box");
			//获取btn01
			var btn01 = document.getElementById("btn01");

			//为btn01绑定单击响应函数
			btn01.onclick = function () {
				//修改box的样式
				/*
				 * 通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面
				 * 	这样的执行的性能是比较差的，而且这种形式当我们要修改多个样式时，也不太方便
				 */
				/*box.style.width = "200px";
				box.style.height = "200px";
				box.style.backgroundColor = "yellow";*/

				/*
				 * 我希望一行代码，可以同时修改多个样式
				 */

				//修改box的class属性
				/*
				 * 我们可以通过修改元素的class属性来间接的修改样式
				 * 这样一来，我们只需要修改一次，即可同时修改多个样式，
				 * 	浏览器只需要重新渲染页面一次，性能比较好，
				 * 	并且这种方式，可以使表现和行为进一步的分离
				 */
				//box.className += " b2";
				//addClass(box,"b2");

				//alert(hasClass(box,"hello"));

				//removeClass(box,"b2");

				toggleClass(box, "b2");
			};

		};

		//定义一个函数，用来向一个元素中添加指定的class属性值
		/*
		 * 参数:
		 * 	obj 要添加class属性的元素
		 *  cn 要添加的class值
		 * 	
		 */
		function addClass(obj, cn) {

			//检查obj中是否含有cn
			if (!hasClass(obj, cn)) {
				obj.className += " " + cn;
			}

		}

		/*
		 * 判断一个元素中是否含有指定的class属性值
		 * 	如果有该class，则返回true，没有则返回false
		 * 	
		 */
		function hasClass(obj, cn) {

			//判断obj中有没有cn class
			//创建一个正则表达式
			//var reg = /\bb2\b/;
			var reg = new RegExp("\\b" + cn + "\\b");

			return reg.test(obj.className);

		}

		/*
		 * 删除一个元素中的指定的class属性
		 */
		function removeClass(obj, cn) {
			//创建一个正则表达式
			var reg = new RegExp("\\b" + cn + "\\b");

			//删除class
			obj.className = obj.className.replace(reg, "");

		}

		/*
		 * toggleClass可以用来切换一个类
		 * 	如果元素中具有该类，则删除
		 * 	如果元素中没有该类，则添加
		 */
		function toggleClass(obj, cn) {

			//判断obj中是否含有cn
			if (hasClass(obj, cn)) {
				//有，则删除
				removeClass(obj, cn);
			} else {
				//没有，则添加
				addClass(obj, cn);
			}

		}

	</script>
</head>

<body>

	<button id="btn01">点击按钮以后修改box的样式</button>

	<br /><br />

	<div id="box" class="b1 b2"></div>
</body>

</html>